<template>
  <div>
    <h2>请选择你喜欢的专栏</h2>
    <span v-for="(item,index) in arr" :key="index">
     <input type="checkbox" @click="fn(index)">{{item}}
    </span>
    <ul>
      <li v-for="(item,index) in arr1" :key="index">{{item}}</li>
    </ul>
   </div>
</template>
 
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      arr:['科幻','喜剧','动漫','冒险','科技','军事','娱乐','奇闻'],
      arr1:[]
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    fn(id){
      if(this.arr1.some(item=>item===this.arr[id])){
        const a=this.arr1.findIndex(item=>item===this.arr[id])
        this.arr1.splice(a,1)
      }else{
        this.arr1.push(this.arr[id])
        }
    }
  }
};
</script>

<style scoped>
     
</style>